<template>
    <div class="Calendar">
        <div class="CalendarBox nBox">
            <div class="h0">
                <p class="lt">治疗日历</p>
            </div>
            <div>
                <div class="ltArea">
                    <div class="h6">类型展示<i class="fa fa-chevron-circle-right"></i></div>
                    <div class="TimeControl selectData">
                        <el-calendar v-model="value">
                        </el-calendar>
                    </div>
                    <div class="h6 mt5">项目类型</div>
                    <div class="typeShow">
                        <p style="background:#cf2424">检验信息</p>
                        <p style="background:#bf53a4">检查信息</p>
                        <p style="background:#eda12a">手术信息</p>
                        <p style="background:#83ad47">临时医嘱信息</p>
                        <p style="background:#a7bcf3">长期医嘱信息</p>
                    </div>
                </div>
                <div class="rtArea">
                    <div id="calendar">
                        <el-calendar v-model="value">
                        </el-calendar>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>
<script>
    export default {
        name: "Modularinformation",
        data() {
            return {
                msg: "SystemManagement 下的 Modularinformation",
                data: [
                    { startDate: "2018-5-10", name: "2018-5-10报告单" },
                    { startDate: "2018-6-10", name: "2018-6-10报告单" },
                    { startDate: "2018-7-10", name: "2018-7-10报告单" },
                    { startDate: "2018-8-10", name: "2018-8-10报告单" },
                    { startDate: "2018-9-10", name: "2018-9-10报告单" },
                    { startDate: "2018-10-10", name: "2018-10-10报告单" },
                    { startDate: "2018-11-1", name: "2018-11-1报告单" },
                    { startDate: "2018-11-1", name: "2018-11-1报告单2" },
                    { startDate: "2018-12-1", name: "2018-12-1报告单" },
                    { startDate: "2018-12-1", name: "2018-12-1报告单2" },
                    { startDate: "2018-12-1", name: "2018-12-1报告单3" },
                    { startDate: "2019-1-10", name: "2019-1-10报告单" },
                    { startDate: "2019-2-10", name: "2019-2-10报告单" },
                    { startDate: "2019-3-10", name: "2019-3-10报告单" },
                    { startDate: "2019-4-10", name: "2019-4-10报告单" },
                    { startDate: "2019-5-10", name: "2019-5-10报告单" },
                    { startDate: "2019-6-10", name: "2019-6-10报告单" },
                    { startDate: "2019-7-10", name: "2019-7-10报告单" },
                    { startDate: "2019-8-10", name: "2019-8-10报告单" },
                    { startDate: "2019-9-10", name: "7:36 血常规lab" },
                    { startDate: "2019-9-10", name: "7:41 SYSMEX血凝仪" },
                    { startDate: "2019-9-10", name: "7:48 生化(7600)" },
                    { startDate: "2019-9-10", name: "16:09 UTUT" },
                    { startDate: "2019-10-10", name: "2019-10-10报告单" },
                    { startDate: "2019-11-10", name: "2019-11-10报告单" },
                    { startDate: "2019-12-10", name: "2019-12-10报告单" },
                    { startDate: "2020-1-10", name: "2020-1-10报告单" },
                    { startDate: "2020-2-10", name: "2020-1-10报告单" }
                ],
                value: new Date()
            };
        },
        methods: {
            openDetails(row, index) {
                this.model_id = row.id;
                this.model_name = row.name;
                this.changeSelectStyle = index;
                if (this.model_XZBJ == "1") {
                    this.model_jm = row.id;
                    this.queryz();
                    this.changeSelectStyle = "0";
                    this.model_jm = "";
                }

                console.log(row);
            },
            handleChange(val) {
                console.log(val);
            },
            //主表保存
            savez() {
                if (this.model_name == "") {
                    this.$message({showClose: true, message: "模块名称不能为空！", type: "error"});
                    return;
                }
                var data = {
                    model: "11.综合维护-模块信息",
                    code: "11041",
                    input: {
                        "id": this.model_id == "" ? "1" : this.model_id,
                        "name": this.model_name
                    }
                };
                this.$post("CloudHIS/Business_Handle", data)
                    .then(res => {
                        if (res.code == 0) {
                            this.model_XZBJ = "1"
                            this.$message({message: res.msg, type: "success"});
                            this.queryz();
                            this.addMasterUser();
                            document.getElementById("2").focus();
                        } else {
                            this.$message({showClose: true, message: res.msg, type: "error"});
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            //删除主表信息
            deletez() {
                var data = {
                    model: "11.综合维护-模块信息",
                    code: "11043",
                    input: {
                        "id": this.model_id
                    }
                };
                this.$post("CloudHIS/Business_Handle", data)
                    .then(res => {
                        if (res.code == 0) {
                            this.$message({message: res.msg, type: "success"});
                            this.queryz();
                            this.addMasterUser();
                        } else {
                            this.$message({showClose: true, message: res.msg, type: "error"});
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            //主表查询

            queryz() {
                this.model_query = [];
                var data = {
                    model: "11.综合维护-模块信息",
                    code: "11042",
                    input: {
                        jm: this.model_jm ? this.model_jm : ""
                    }
                };
                console.log(data)
                this.$post("CloudHIS/Business_Handle", data)
                    .then(res => {
                        if (this.model_XZBJ == "1") {
                            this.model_query.push( res.data[res.data.length - 1]);this.model_XZBJ = "";
                            this.changeSelectStyle = "0";
                        } else {
                            this.model_query = res.data;
                            this.addMasterUser();
                        }
                        console.log("查询结果");
                        console.log(res);
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            submit1() {
                var ele = window.event.srcElement;
                var idcount = parseInt(ele.id) + 1;

                document.getElementById(idcount + "").focus();
            },

            initDate(){
                $("#calendar").calendar({
                    data: this.data,
                    mode: "month",
                    //  maxEvent: 3,
                    //  showModeBtn: false,
                    //  newDate: "2018-04-1",
                    cellClick: function (events) {
                        //viewCell的事件列表
                    }
                })
            }
        },
        mounted(){

        },
        created() {
            this.msg = this.$route.query;
            console.log("接收过来的传参#############################################################################")
            console.log(this.msg)
            if (this.msg.Token != null && this.msg.Token != "") {
                console.log("设置Token")
                this.$setToken(this.msg.Token)
                this.$setItemUrl(this.msg.ItemIP)
                var loginInfor = this.msg.loginInfor;
                this.LoginInfor = JSON.parse(loginInfor);
                console.log("个人登录信息");
                console.log(this.LoginInfor);
                if (this.LoginInfor != null) {
                    this.huizhenObj.Consult.HospitalId = this.LoginInfor.HospitalId
                    this.huizhenObj.Consult.DeptId = this.LoginInfor.UserId
                    this.huizhenObj.Consult.DoctorId = this.LoginInfor.UserId
                }
            } else {
                console.log("Token为空")
                var loginInfor = localStorage.getItem('LoginInfor');
                this.LoginInfor = JSON.parse(loginInfor);
                console.log("个人登录信息");
                console.log(this.LoginInfor);
                if (this.LoginInfor == null) {
                    this.LoginInfor = {
                        SectionName: "",
                        UserName: ""
                    }
                }
            }
            this.initDate();
        }
    };
</script>

<style lang="scss">
    .Calendar{
        .selectData{
            .el-calendar-table .el-calendar-day {
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                padding: 8px;
                height: 26px!important;
            }
            .el-button--mini, .el-button--mini.is-round {
                padding: 7px 2px!important;
            }
            .el-button-group {
                width: 120px!important;
            }
        }
        .CalendarBox .ltArea{position: absolute;bottom:0; top:44px;left: 0;width: 230px; overflow-y: auto}
        .CalendarBox .ltArea::-webkit-scrollbar{ display:none; }
        .CalendarBox .ltArea .mt5{ margin-top: 5px; }
        .CalendarBox .ltArea .typeShow{ padding: 5px 0 5px 3px;}
        .CalendarBox .ltArea .typeShow p{ height: 22px; line-height: 22px; color: #fff;border-radius: 2px;
            margin-bottom: 3px; padding: 0 8px;}
        .CalendarBox .rtArea{position: absolute;bottom:0;right: 0; top:44px;left: 245px;}
        .CalendarBox .h6{ background:#e8f2ff; font-size: 14px; color: #0089ef;margin: 0; height: 30px;
            line-height: 29px; padding: 0 0 0 10px;border: 1px solid #c7dfff; border-radius: 2px;}
        .CalendarBox .h6 i{ float: right; font-size: 18px; line-height: 30px; padding: 0 10px;}

        #calendar{width:100%}
        .calendar{position:relative;font-family:"Chinese Quote","Microsoft YaHei";font-size:14px}
        .calendar-header{padding:11px 5px 11px 0;}
        .calendar-header button{ background: none; border: 1px solid #ddd; border-radius: 4px;
            padding: 3px 12px; margin-right: 5px;}
        .calendar-header button + span{ margin-left: 20px; }
        .calendar-select{line-height:1.5;color:rgba(0,0,0,.65);-webkit-box-sizing:border-box;
            box-sizing:border-box;margin:0;padding:0;list-style:none;display:inline-block;
            position:relative;outline:0}
        .calendar-table{width:100%;height:100%}
        .calendar-table thead{ background: #f6fdff;}
        .calendar-cell,.calendar-column-header{width:14%;border: 1px solid #cbdeff;}
        .calendar-column-header{font-weight:400;text-align:center;padding-right:12px}
        .calendar-table{table-layout:fixed}
        .calendar-cell{color: #3788fd }
        .calendar-cell.calendar-last-month-cell,.calendar-cell.calendar-next-month-cell{color:rgba(0,0,0,.25);
            background: #efefef}
        .calendar-date{padding:5px;}
        .calendar-cell.calendar-thisMonth .calendar-date,
        .calendar-cell.calendar-today .calendar-date{border-top-color:#1890ff;background-color:#e6f7ff}
        .calendar-date:hover{background:#e6f7ff}
        .calendar-value{text-align:right}
        .calendar-content{height:60px;overflow-x:hidden;overflow-y:auto;position:static;width:auto;
            left:auto;bottom:auto}
        .calendar-select{font-size:13px;vertical-align:middle}
        .btn.calendar-select-active{border-color: #b9dfff; z-index: 2; background: #ecf7ff;}
        .calendar-select:first-child{margin-right:10px}
        .calendar-month-select,.calendar-year-select{border-radius:4px;border:1px solid #d9d9d9}
        .calendar-month-select:hover,.calendar-year-select:hover{border-color:#40a9ff}
        .calendar-month-text,.calendar-year-text{margin:0 10px;line-height:28px}
        .calendar-icon{margin:0 10px 0 0}
        .calendar-icon *{color:rgba(0,0,0,.25)}
        .btn{float:left;padding:5px 10px;border:1px solid #d9d9d9;border-radius:4px}
        .btn-group{float:left;display:inline;padding:0 8px}
        .btn-group>.btn{position:relative;float:left}
        .btn-group>.btn:hover{z-index:2;border-color:#40a9ff}
        .btn-group .btn+.btn{margin-left:-1px}
        .btn-group>.btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
        .btn-group>.btn:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
        .dropdown-month li,.dropdown-year li,ul.dropdown-month,ul.dropdown-year{list-style:none;
            text-align:center;padding:0;margin:0}
        .dropdown-month.open,.dropdown-year.open{display:inline-block;margin-top:1px;width:100%}
        .dropdown-month,.dropdown-year{height:250px;overflow-y:auto;overflow-x:hidden;display:none;
            position:absolute;left:0;top:100%;background:#fff;width:50px;border:1px solid #eee;
            box-shadow:0 6px 12px rgba(0,0,0,.175);-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175)}
        .dropdown-month .month-item,.dropdown-year .year-item{font-size:12px;position:relative;display:block;
            padding:5px 2px;line-height:20px;font-weight:400;color:rgba(0,0,0,.65);white-space:nowrap;
            cursor:pointer;overflow:hidden;text-overflow:ellipsis;-webkit-transition:background .3s ease;
            transition:background .3s ease}
        .month-item:hover,.year-item:hover{background:#e6f7ff}
        .year-item.active{background-color:#fafafa;font-weight:600;color:rgba(0,0,0,.65)}
        ul.events li{ font-size:13px;padding:1px 2px;color:#d54040;}
        ul.events li:before{content:"*";display: none}
        /*选择平台页*/
        .IfChange{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            border: none;
            padding-left: 200px;
        }
        /*公共管理头部*/
        .nBox .h0{
            height: 45px;
            padding:6px 0 0 9px;
            border-bottom:1px solid #d2ecff;
        }
        .nBox .h0 .lt{
            font-size: 18px;
            line-height: 32px;
            padding-left: 5px;
            color: #6bb1ec;
            font-weight: bold;
        }
        .nBox .h0 .rt{margin-right: 12px;}
        .nBox .h0 .rt .btn{margin-left: 5px;}
        .nBox .Ahead{ height: 32px;line-height: 32px;padding: 0 15px;
            background:#ecf4ff;     color: #0092ff;}
        .nBox .Ahead .btn{ padding: 2px 12px; margin-top: -4px;}
        .nBox .Ahead i{ color: #0092ff;cursor: pointer}
        .nBox .Tb label{margin: 0;display: block; cursor: pointer}
        .nBox .Tb label b{ margin-right: 5px; float: left}

        .nBox .menu{ padding: 0 10px 0 15px;}
        .nBox .menu dl{ margin-bottom: 2px; position: relative;}
        .nBox .menu dl:before{ content: ''; border-left: 1px dashed #a4d5ff; height: calc(90%);
            position: absolute; left: 6px; top: 24px; }
        .nBox .menu dl:last-child:before{ display: none; }
        .nBox .menu dt{ line-height:30px; font-weight: normal; color: #177ad0; }
        .nBox .menu label{margin: 0;}
        .nBox .menu label input{position: relative; top: 1px;margin-right: 5px;}
        .nBox .menu dt label{position: relative;margin-left: 2px;}
        .nBox .menu dt label:before{content: ''; width: 7px; height: 0; border-bottom: 1px dashed #ddd;
            position: absolute; left:-8px; top: 14px; }
        .nBox .menu dd{ margin-left: 28px; line-height: 24px; position: relative; cursor: pointer;
            padding-left: 16px;}
        .nBox .menu dd dd:hover,
        .nBox .menu dd.high{background: #ecf4ff; }
        .nBox .menu dd:before{ content: ''; border-left: 1px dashed #ddd; height: calc(100%);
            position: absolute; left: 0; top: 0;  }
        .nBox .menu dd:after{ content: ''; width: 13px; height: 0; border-bottom: 1px dashed #ddd;
            position: absolute; right: calc(100% - 15px); top: 11px; }
        .nBox .menu dd:last-child:before{ height: 11px;}
        .nBox .menu dd i{ color: #999; margin-right:6px;display: inline-block; width: 11px;}
        .nBox .menu dd label{ display: block;cursor: pointer}
        .nBox .menu dd b{ margin-left: -22px; position: relative; z-index: 2; top: -4px;}
        .nBox .menu dd dd{margin-left: 6px;}
        .nBox .menu b{ width: 12px; display: inline-block; line-height: 12px; padding-top: 0;
            height: 13px; font-weight: normal; float: left; background-color: #73b1e7;
            margin-top: 8px; margin-right: 8px; font-size: 14px; border-radius: 2px;
            text-align: center; color: #ffffff; outline: none; border: 0; cursor: pointer; }
        /*背景弹框*/
        .blackBg{
            position: fixed;
            z-index: 999;
            background: rgba(0,0,0,0.5);
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .blackBg .closes{
            color: #666;
            font-size: 30px;
            position: absolute;
            right: 5px;
            top: 0;
            padding: 0 5px;
            cursor: pointer;
        }
        .blackBg .p500{
            width: 550px;
        }
        .blackBg .p1000{
            width: 1000px;
        }
        .pucType2 p{
            float: left;
            margin-left: 15px;
            margin-top: 5px;
        }
        .pucType3 p{
            float: left;
            margin-left: 10px;
            margin-top: 5px;
        }
        .pucType2 p span{
            background: #f6f6f6;
            height: 32px;
            float: left;
            border: 1px solid #ccc;
            margin-right: -2px;
            position: relative;
            padding-left: 5px;
            line-height: 31px;
            z-index: 2;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }
        .pucType3 p span{
            background: #f6f6f6;
            height: 28px;
            float: left;
            border: 1px solid #ccc;
            margin-right: -2px;
            position: relative;
            padding-left: 5px;
            line-height: 27px;
            z-index: 2;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }
        .pucType2 .form-control{
            width: 150px;
            padding: 0 5px;
        }
        .pucType3 .form-control{
            height: 28px;padding: 0 5px;
        }
        .pucType5 p{ float: left; margin-left: 10px; margin-top: 5px;}
        .pucType5 p label{ background: #f6f6f6; height: 28px; float: left; border: 1px solid #ccc;
            margin:0 -2px 0 0; position: relative; padding-left: 5px; line-height: 27px;
            z-index: 2; border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
        .pucType5 .form-control{
            height: 28px;padding: 0 5px;width: 132px;
        }
        .Tb{border: 1px solid #ccc;}
        .Tb table{border: none; margin: 0;}
        .Tb table th:first-child,.Tb table td:first-child{ border-left: none;}
        .Tb table th:last-child,.Tb table td:last-child{ border-right: none;}
    }

</style>
